<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="https://cdn.hanxiaoxin.cn/iot/esp32/http-server/images/tower-logo.png">
    <title>device info</title>
    <style>
        .root {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .device {
            margin: 20px 0 20px 0;
        }

        .actions {
            display: flex;
            flex-direction: row;
            margin: 20px 0 20px 0;

            button {
                margin: 0 10px 0 10px;
            }
        }

        .card {
            width: 250px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            transition: 0.3s;
        }

        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }

        .container {
            padding: 2px 16px;
        }

        .info {
            display: flex;
        }

        .title {
            font-weight: bold;
            margin-right: 10px;
        }

        .gallery {
            display: flex;
            margin: 20px 0 20px 0;
        }


        .actions {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .line {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="device">
            <div class="card">
                <img id="logo" loading="lazy" src="https://cdn.hanxiaoxin.cn/iot/esp32/http-server/images/cat-sea.webp"
                    alt="Avatar" style="width:100%">
                <div class="container">
                    <div class="info">
                        <div class="title">mcu</div><span id="machine">-</span>
                    </div>
                    <div class="info">
                        <div class="title">id</div> <span id="device_id">-</span>
                    </div>
                    <div class="info">
                        <div class="title">release</div> <span id="release">-</span>
                    </div>
                    <div class="info">
                        <div class="title">ip</div><span id="ip">-</span>
                    </div>
                    <div class="info">
                        <div class="title">gateway</div><span id="gateway">-</span>
                    </div>
                    <div class="info">
                        <div class="title">free memory</div><span id="free">-</span></span>
                    </div>
                    <div class="info">
                        <div class="title">alloc memory</div><span id="alloc">-</span>
                    </div>
                    <div class="info">
                        <div class="title">temperature</div><span id="temperature">-</span>
                    </div>
                </div>
            </div>

        </div>
        <div>current time: <span id="time"></span></div>
        <div class="actions">
            <div class="line">
                <button id="ledon">点亮LED</button>
                <button id="ledoff">关闭LED</button>
            </div>
            <div class="line">
                <select name="project" id="project_list">
                    <option value="default">默认项目</option>
                </select>
                <button id="change_project">切换项目</button>
            </div>
            <div class="line">
                <button id="reboot">重启设备</button>
            </div>
        </div>

        <script>
            let project_name = 'default'

            function updateTime() {
                const date = new Date()
                const timeEle = document.getElementById("time")
                // console.log(timeEle)
                if (timeEle) {
                    timeEle.innerHTML = date.toLocaleTimeString()
                }
            }

            function sendRequest(path) {
                return new Promise((resolve) => {
                    const xhr = new XMLHttpRequest()
                    xhr.onreadystatechange = () => {
                        if (xhr.readyState !== XMLHttpRequest.DONE) {
                            return
                        }
                        try {
                            const resJSON = JSON.parse(xhr.response)
                            console.log('response: ', resJSON)
                            resolve(resJSON)
                        } catch (e) {
                            console.error(e)
                        }
                    }
                    const origin = window.location.origin
                    xhr.open('get', `${origin}${path}`)
                    xhr.send()
                })
            }

            const timer = setInterval(() => {
                // console.log(1111)
                updateTime()
            }, 500);

            sendRequest('/api/info').then(res => {
                console.log(res)
                device_info = res["device_info"]
                device_id = device_info["device_id"]
                platform = device_info["platform"]
                flash_size = device_info["flash"]["size"]
                free_m = device_info["gc"]["free_m"]
                alloc_m = device_info["gc"]["alloc_m"]
                uname = device_info["uname"]
                sysname = uname["sysname"]
                release = uname["release"]
                machine = uname["machine"]
                const idEle = document.getElementById("device_id")
                idEle.innerHTML = device_id

                const machineEle = document.getElementById("machine")
                machineEle.innerHTML = platform

                const releaseEle = document.getElementById("release")
                releaseEle.innerHTML = release
                const freeEle = document.getElementById("free")
                const allocEle = document.getElementById("alloc")
                freeEle.innerHTML = free_m + 'KB'
                allocEle.innerHTML = alloc_m + 'KB'

                temperature = device_info["temperature"]
                const tempEle = document.getElementById("temperature")
                tempEle.innerHTML = temperature + "℃"

                const ip = device_info["ifconfig"]["ip"]
                const gateway = device_info["ifconfig"]["gateway"]
                const ipEle = document.getElementById("ip")
                const gatewayEle = document.getElementById("gateway")
                ipEle.innerHTML = ip
                gatewayEle.innerHTML = gateway
            })

            const projectEle = document.getElementById("project_list")

            sendRequest('/api/projects').then(res => {
                projects = res.projects || []
                current_project = res.current || "-"
                projectEle.value = current_project

                for (const item of projects) {
                    const option = document.createElement("option")
                    option.value = item.name
                    option.innerText = item.name
                    projectEle.appendChild(option)
                }
            });

            const buttonLedOn = document.getElementById("ledon")
            const buttonLedOff = document.getElementById("ledoff")
            buttonLedOn.addEventListener('click', () => {
                sendRequest('/api/led_on').then(res => {
                    console.log('led_on ok')
                })
            })
            buttonLedOff.addEventListener('click', () => {
                sendRequest('/api/led_off').then(res => {
                    console.log('led_off ok')
                })
            })

            const changePjtBtn = document.getElementById("change_project")
            changePjtBtn.addEventListener('click', () => {
                project_name = projectEle.value
                sendRequest(`/api/change_project?name=${project_name}`).then(res => {
                    console.log(res)
                    alert(`项目${project_name}切换成功,请刷新页面`)
                })
            })

            const rebootBtn = document.getElementById("reboot")
            rebootBtn.addEventListener('click', () => {
                sendRequest(`/api/reboot`).then(res => {
                    console.log(res)
                    alert(`请等待设备重启成功，然后刷新页面`)
                })
            })
        </script>
</body>

</html>